<template>
  <h6 style="color: crimson">系统管理--><a href="http://localhost:5173/role">用户管理</a>-->添加用户</h6>
  <el-form ref="AddFormRef" :inline="true" :model="addForm" class="demo-form-inline">

    <el-form-item label="角色名称" prop="posName">
      <el-input v-model="addForm.posName" style="width: 240px" placeholder="角色名称" clearable />
    </el-form-item>
    <el-form-item label="角色描述" prop="roleName">
      <el-input v-model="addForm.roleName" style="width: 240px" placeholder="角色描述" clearable />
    </el-form-item>
    <br/>

    <el-form-item label="角色状态" prop="roleState">
      <el-select v-model="addForm.roleState" placeholder="角色状态" style="width: 240px" clearable  >
        <el-option :value="0" label="正常"/>
        <el-option :value="1" label="禁用"/>
      </el-select>
    </el-form-item>
    <br/>
    <el-form-item label="角色部门" prop="departName">
      <el-select v-model="addForm.departName" placeholder="角色部门" style="width: 240px" clearable  >
        <el-option
            v-for="item in departOptions.optionData"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="warning" @click="resetAll">重置</el-button>
      <el-button type="primary" @click="addUser">添加</el-button>
    </el-form-item>
  </el-form>

</template>

<script  setup>
import {ref,reactive,onMounted,getCurrentInstance} from "vue";
import axios from "@/plugins/axios.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const addForm = ref({
  departName:null,
  roleState:null,
  posName:null,
  roleName:null,
  pageSize:10,
  pageNum:0
});



const tableList =reactive({tableData:[],total:10})
const departOptions  =  reactive({optionData:[]})
const roleStateOptions=  reactive({optionData:[]})
const posOptions=  reactive({optionData:[]})
const roleOptions=  reactive({optionData:[]})
const userGenderOptions=  reactive({optionData:[]})
const resetAll = () => {
  addForm.value.departName=null
  addForm.value.roleState=null
  addForm.value.posName=null
  addForm.value.roleName=null
};
const addUser = () => {
  console.log(addForm.value);

  axios.postJson("/role/add",addForm.value).then( res=>{
    tableList.tableData=res.data
  })

};

onMounted(()=>{
      axios.get("role/query").then(res=>{
        if(res.code===200){
          tableList.tableData=res.data
        }
      })
      axios.get("/role/paramList").then(res=>{
        if(res.code===200){
          console.log(res.data)
          departOptions.optionData=res.data.departName
          roleStateOptions.optionData=res.data.roleState
          posOptions.optionData=res.data.posName
          roleOptions.optionData=res.data.roleName
        }
      })
      axios.get("/role/getTatol").then( res=>{
        tableList.total=res.data
      })
    }
)
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>